<template>
  <view class="container">
    <view class="notic-bar">
      <uni-notice-bar show-icon scrollable text="账号密码最好先在电脑端进行登录,检查无误后,否则绑定可能会失败的!!!" /> 
    </view>
   <view class="formStyle">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item label="员工ID" required name="employeeId">
          <uni-easyinput
            v-model="formData.employeeId"
            placeholder="请输入员工ID"
          />
        </uni-forms-item>
        
        <uni-forms-item label="密码" required name="password">
          <uni-easyinput
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
          />
        </uni-forms-item>
      </uni-forms>
      
      <button class="submit-btn" @tap="handleLogin">绑定并登录</button>
   </view>
  </view>
</template>

<script>
  import {  mapActions  } from  'vuex'
  export default {
    data() {
        return {
          formData: {
            employeeId: '',
            password: ''
          },
          rules: {
            employeeId: {
              rules: [{
                required: true,
                errorMessage: '请输入员工ID'
              }]
            },
            password: {
              rules: [{
                required: true,
                errorMessage: '请输入密码'
              }]
            }
          }
        }
      },
      methods: {
      ...mapActions('m_user',['loginAndBind']),
      async  handleLogin () {
        const vaild = await this.$refs.form.validate()
        if(!vaild) return 
        this.loginAndBind(this.formData)
      }
      }
  }
</script>

<style lang="scss">
.container {
  text-align: center;
  min-height: 100vh;
  padding: 40rpx;
  background: linear-gradient(180deg,#2b7ff3 0%,#f5f5f5 100%);
}


.submit-btn {
  margin-top: 60rpx;
  background-color: #2B7FF3;
  color: #fff;
}

.notic-bar {
  margin-bottom: 70rpx;
}

</style>
